<template>
	<div class="fl-c">
		<flexbox class="fl-h">
			<div v-photo="item.create_user_id[0].username"
				v-lazy:background-image="$options.filters.filterUserLazyImg(item.create_user_id[0].username)"
				:key="item.create_user_id[0].username" class="div-photo fl-h-img" />
			<div class="fl-h-b">
				<div class="fl-h-name">{{ item.create_user_id[0].username }}</div>
				<div class="fl-h-time">{{ item.create_time|filterTimestampToFormatTime('YYYY-MM-DD HH:mm') }}</div>
			</div>
			<flexbox class="fl-h-mark">
				<img class="fl-h-mark-img" src="@/assets/img/follow_record.png">
				<!-- <div class="fl-h-mark-name">跟进日志</div> -->
			</flexbox>
			<el-dropdown trigger="click" @command="handleCommand">
				<i style="color:#CDCDCD;margin-left: 8px;" class="el-icon-arrow-down el-icon-more" />
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item v-if="allAuth.customer && allAuth.customer.updaterecord"
						:command="{data:item,type:'update'}">修改</el-dropdown-item>
					<el-dropdown-item v-if="allAuth.customer && allAuth.customer.dellog"
						:command="{data:item,type:'delete'}">删除</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</flexbox>
		<div class="fl-b">
			<div class="fl-b-content">{{ item.content }}</div>
			<div v-if="item.file.length > 0">
				<p style="margin-top: 20px;">附件如下：</p>
				<p v-for="(o, k) in item.file" :key="k" style="margin-top: 10px;">
					<a v-if="o.file_type == 'image'" @click="previewImg(item.file, k)" href="javascript:void(0);"
						style="display: block;">{{o.name}}</a>
					<a v-else-if="o.file_type == 'viewfile'" :href="o.file_path" target="_blank"
						style="display: block;">{{o.name}}</a>
					<a v-else :href="'https://view.officeapps.live.com/op/view.aspx?src='+o.file_path" target="_blank"
						style="display: block;">{{o.name}}</a>
				</p>
			</div>
			<div v-if="item.category || item.next_time" class="follow">
				<span v-if="item.category" class="follow-info">{{ item.category }}</span>
				<span v-if="item.next_time"
					class="follow-info">{{ item.next_time|filterTimestampToFormatTime('YYYY-MM-DD HH:mm:ss') }}</span>
			</div>
		</div>
		
		<!-- dialog弹窗 -->
		<dialog-form
			:dialog-visible="dialogForm"
			:title="title"
			ref="crmform"  
			:crm-type="crmType"
			:action="action"
			:form-data="formData"
			@close = "closeDialog"
			@save-dialog="saveDialog">
		</dialog-form>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		downloadFile
	} from '@/utils'
	import {
		crmlogsUpdate
	} from '@/api/customer/customer'
	import {
		crmRecordDelete
	} from '@/api/customer/common'
	import DialogForm from '@/components/FromData/dialogForm'
	export default {
		/** 客户管理 的 客户详情 的 跟进记录cell*/
		name: 'FollowRecordCell',
		components: {
			DialogForm
		},

		props: {
			item: {
				type: Object,
				default: () => {
					return {}
				}
			},
			/** 没有值就是全部类型 有值就是当个类型 */
			crmType: {
				type: String,
				default: ''
			},
			/** 行索引 */
			index: [String, Number]
		},
		data() {
			return {
				// dialog弹窗
				dialogForm:false,
				title:"",
				dialogType:"",
				action:{ type: '',actiontype:'',relevant:'' },
				formData:{}
			}
		},
		computed: {
			...mapGetters(['allAuth'])
		},
		mounted() {},
		methods: {
			/**
			 * 删除跟进记录
			 */
			handleCommand(item) {
				if(item.type == "update"){
					this.title = "修改信息"
					this.dialogForm = true
					this.action = { type: 'update',relevant:"log",actiontype:18 }
					this.formData = JSON.parse(JSON.stringify(item.data))
				}else if(item.type == "delete"){
					this.$confirm('确定删除?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						})
						.then(() => {
							let request
							request = crmRecordDelete
					
							request({
									id: this.item.id
								})
								.then(res => {
									this.$emit('on-handle', {
										type: command,
										data: {
											item: this.item,
											index: this.index
										}
									})
									this.$message.success(res.data)
								})
								.catch(() => {})
						})
						.catch(() => {
							this.$message({
								type: 'info',
								message: '已取消操作'
							})
						})
				}
			},

			// 预览图片
			previewImg(list, index) {
				this.$bus.emit('preview-image-bus', {
					index: index,
					data: list.map(function(item, index, array) {
						item.url = item.file_path
						return item
					})
				})
			},

			// 下载附件
			downloadFile(file) {
				downloadFile({
					path: file.file_path,
					name: file.name
				})
			},
			
			
			// 弹窗操作
			closeDialog(){
				this.title = ""
				this.dialogForm = false
				this.formData = {}
			},
			
			// 保存操作
			saveDialog(item){
				let data = item.data
				// data["customer_id"] = item.data.customer_id
				let request
				if(item.type == "update_log"){
					request = crmlogsUpdate
				}
				
				request(data)
					.then(res => {
						this.$message.success(res.data)
						this.closeDialog()
						this.$emit('on-handle', {
							type: item.type
						})
					})
			}


		}
	}
</script>

<style lang="scss" scoped>
	@import '../styles/followcell.scss';

	.follow {
		.follow-info {
			padding: 5px 10px;
			background-color: #f5f7fa;
			color: #999;
			height: 40px;
			line-height: 40px;
			border-radius: 28px;
			font-size: 12px;
			margin-right: 10px;
		}
	}

	.crm-type {
		color: rgb(99, 148, 229);
		font-size: 14px;
	}
</style>